<template>
	<view class="login_layout">
		<image class="user_image" src="/static/images/avatar.png" mode=""></image>
		<text class="login_text">请点击下方的按钮，授权登陆您的账户～</text>
		<button size="mini" class="login_button" type="button" @click="login">点击授权登陆</button>
	</view>
</template>

<script setup>
	import { toast } from '@/utils/extendApi.js'
	import { setStorage } from '@/utils/storage.js'
	import { reqLogin, reqUserInfo } from '@/api/user.js'
	import useUserStore from '@/store/modules/user.js'

	let userStore = useUserStore()

	// 授权登录
	const login = () => {
		uni.login({
			success: async ({ code }) => {
				if (code) {
					let result = await reqLogin(code)
					setStorage('token', result.data.token)
					userStore.setToken(result.data.token)
					getUserInfo()
					uni.navigateBack()
				} else {
					toast({
						title: '用户授权失败'
					})
				}
			}
		})
	}

	// 获取用户信息
	const getUserInfo = async () => {
		let { data } = await reqUserInfo()
		setStorage("userInfo", data)
		userStore.setUserInfo(data)
	}
</script>

<style lang="scss" scoped>
	.login_layout {
		margin-top: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.user_image {
			width: 180rpx;
			height: 180rpx;
		}

		.login_text {
			margin: 50rpx 0 40rpx 0;
			color: rgba(185, 185, 185, 1.0);
			font-size: 30rpx;
		}

		.login_button {
			color: rgba(255, 255, 255, 1);
			background-color: #ff0000;
			border-radius: 50rpx;
		}
	}
</style>